<template>
  <!--
    	作者：luoyiming
    	时间：2020-06-20
    	描述：diy组件-模拟显示-砍价
    -->
  <div class="drag optional" :class="{ selected: index === selectedIndex }" @click.stop="$parent.$parent.onEditer(index)">
    <div class="diy-sharpproduct" :style="{ background: item.style.background }">
      <div class="sharpproduct-head d-b-c">
        <div class="left d-s-c">
          <div class="name">
            活动砍价
          </div>
          <div class="datetime d-s-c">
            <span class="text">活动剩余：</span>
            <span class="box hour">12</span>
            <span class="text">天</span>
            <span class="box hour">30</span>
            <span class="text">:</span>
            <span class="box hour">00</span>
            <span class="text">:</span>
            <span class="box hour">00</span>
          </div>
        </div>
        <div class="right">更多</div>
      </div>
      <ul class="product-list" :class="['column__' + item.style.column]" :style="getUlwidth(item)">
        <li class="product-item" v-for="(product, index) in item.data" :key="index">
          <!-- 两列三列 -->
          <div class="product-cover"><img v-img-url="product.image" /></div>
          <div class="product-info p-0-10">
            <div v-if="item.style.show.productName == '1'" class="product-title">{{ product.product_name }}</div>
            <div>2人正在砍价</div>
            <div class="price d-b-c f12">
              <div>
                <div v-if="item.style.show.floorPrice == '1'">
                  <span>最低价</span>
                  <span class="orange">¥120</span>
                </div>
                <div v-if="item.style.show.originalPrice == '1'" class="gray6">
                  <span>价格</span>
                  <span>¥233</span>
                </div>
              </div>
              <div class="btns"><el-button plain>立即参加</el-button></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="btn-edit-del"><div class="btn-del" @click.stop="$parent.$parent.onDeleleItem(index)">删除</div></div>
  </div>
</template>

<script>
import ProductApi from '@/api/product.js';
export default {
  data() {
    return {
      /*商品列表*/
      tableData: [],
      /*分类id*/
      category_id: 0
    };
  },
  created() {
  },
  props: ['item', 'index', 'selectedIndex'],
  methods: {

    /*计算宽度*/
    getUlwidth(item) {
      if (item.style.display == 'slide') {
        let total = 0;
        if (item.params.source == 'choice') {
          total = item.data.length;
        } else {
          total = item.defaultData.length;
        }
        let w = 0;
        if (item.style.column == 2) {
          w = total * 150;
        } else {
          w = total * 100;
        }
        return 'width:' + w + 'px;';
      }
    }
  }
};
</script>

<style>
.diy-sharpproduct .product-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.diy-sharpproduct .product-list.column__1 .product-item {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  padding: 10px;
  border-bottom: 1px solid #dddddd;
  background: #ffffff;
}

.diy-sharpproduct .product-list.column__1 .product-item-box {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

.diy-sharpproduct .product-list.column__1 .product-cover {
  width: 100px;
  height: 100px;
}

.diy-sharpproduct .product-list.column__1 .product-info {
  margin-left: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.diy-sharpproduct .product-list .product-title {
  margin-top: 4px;
  height: 40px;
  line-height: 20px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.diy-sharpproduct .display__list .column__2,
.diy-sharpproduct .display__list .column__3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.diy-sharpproduct .product-list.column__2 .product-item {
  width: 170px;
  margin-bottom: 10px;
  background: #ffffff;
}
.diy-sharpproduct .product-list.column__2 .product-item .product-cover {
  width: 170px;
  height: 170px;
  overflow: hidden;
}

.diy-sharpproduct .product-list.column__3 .product-item {
  width: 117px;
  margin-bottom: 10px;
  background: #ffffff;
}
.diy-sharpproduct .product-list.column__3 .product-item .product-cover {
  width: 117px;
  height: 117px;
  overflow: hidden;
}
.diy-sharpproduct .product-list.column__3 .product-item .product-cover img {
  width: 117px;
}

.diy-sharpproduct .product-list.column__2 .product-title,
.diy-sharpproduct .product-list.column__3 .product-title {
  height: 40px;
  overflow: hidden;
}
.sharpproduct-head {
  height: 40px;
}
.sharpproduct-head .name {
  font-size: 18px;
  font-weight: bold;
}
.sharpproduct-head .datetime {
  margin-left: 20px;
}
.sharpproduct-head .datetime > span {
  display: inline-block;
}
.sharpproduct-head .datetime .text {
  padding: 0 2px;
}
.sharpproduct-head .datetime .box {
  padding: 2px;
  background: #000000;
  color: #ffffff;
}
</style>
